<template>
  <div class="m-switch-wrap">
    <button @click="onSwitch" type="button" :class="['m-switch', { 'btn-checked': checked, 'disabled': disabled }]">
      <span :class="['u-switch-inner', checked ? 'inner-checked' : 'inner-unchecked' ]">{{ checked ? checkedInfo : uncheckedInfo }}</span>
      <div class="u-animate-node"></div>
    </button>
  </div>
</template>
<script>
export default {
  name: 'Switcher',
  props: {
    defaultChecked: { // 初始是否选中
      type: Boolean,
      default: false
    },
    uncheckedInfo: { // 未选中时的内容
      type: String,
      default: ''
    },
    checkedInfo: { // 选中时的内容
      type: String,
      default: ''
    },
    disabled: { // 是否禁用
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checked: this.defaultChecked,
      status:"1"
    }
  },
  methods: {
    onSwitch () {
      this.checked = !this.checked
  
      this.$emit("isstatus",this.status)
      if(this.checked==true){
        this.status=1
      console.log('checked:', this.status)

      }else if(this.checked==false){
        this.status=0
      console.log('checked:', this.status)

      }

    }
  }
}
</script>
<style lang="scss" scoped>
.m-switch-wrap {
  height: 22px;
  min-width: 46px;
  .m-switch {
    position: relative;
    color: rgba(0,0,0,.65);
    font-size: 14px;
    min-width: 44px;
    height: 22px;
    line-height: 20px;
    background-color: rgba(0,0,0,.25);
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: all .36s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    .u-switch-inner {
      display: block;
      color: #fff;
      font-size: 12px;
    }
    .inner-checked {
      margin-right: 24px;
      margin-left: 6px;
    }
    .inner-unchecked {
      margin-right: 6px;
      margin-left: 24px;
    }
    .u-animate-node {
      -webkit-animation: fadeEffect 2s cubic-bezier(.08,.82,.17,1),waveEffect .4s cubic-bezier(.08,.82,.17,1);
      animation: fadeEffect 2s cubic-bezier(.08,.82,.17,1),waveEffect .4s cubic-bezier(.08,.82,.17,1);
      -webkit-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
    }
  }
  .m-switch::after {
    // box-shadow: 0 2px 4px 0 rgb(0 35 11 / 20%);
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 18px;
    cursor: pointer;
    transition: all .36s cubic-bezier(.78,.14,.15,.86);
    content: " ";
  }
  .btn-checked {
    background: #1890ff;
  }
  .btn-checked::after {
    left: 100%;
    margin-left: -1px;
    transform: translateX(-100%);
  }
  .disabled {
    pointer-events: none;
    opacity: .4;
  }
}
</style>